<template>

  <div class="home">
    <!-- 收入与支出 -->
    <div class="type">
      <div class="expend type_style" :class="{type_isActive: typeIndex == 1 }" @click="changeNav(1)">支出</div>
      <div class="income type_style" :class="{type_isActive: typeIndex == 2 }" @click="changeNav(2)">收入</div>
    </div>
    <!-- 按日、月、年 -->
    <div class="data_type">
      <div class="day data_type_info" :class="{type_isActive: dataTypeIndex == 1 }" @click="changeDataNav(1)">按天</div>
      <div class="month data_type_info" :class="{type_isActive: dataTypeIndex == 2 }" @click="changeDataNav(2)">按月</div>
      <div class="year data_type_info" :class="{type_isActive: dataTypeIndex == 3 }" @click="changeDataNav(3)">按年</div>
    </div>

    <!-- 收支情况 -->
    <div class="expend_condition" v-if="typeIndex === 1">
      <!-- 天支出 -->
      <div class="dayExpend" v-if="dataTypeIndex === 1">
        <div class="title" v-for="(item, index) in expendDataDay" :key="index">
          <span>{{item[0].nowTime[0]}}</span>
          <div class="item" v-for="(item1, index) in item" :key="index">
            <span>{{item1.chooseTag}}({{item1.remarkValue}})</span>
            <span>￥{{item1.moneyInputValue}}</span>
          </div>
        </div>
      </div>
      <!-- 月支出 -->
      <div class="monthExpend" v-else-if="dataTypeIndex === 2">
        <div class="title" v-for="(item, index) in expendDataMonth" :key="index">
          <span>{{item[0].nowTime[0].slice(0,-3)}}</span>
          <div class="item" v-for="(item1, index) in item" :key="index">
            <span>{{item1.chooseTag}}({{item1.remarkValue}})</span>
            <span>￥{{item1.moneyInputValue}}</span>
          </div>
        </div>
      </div>
      <!-- 年支出 -->
      <div class="yearExpend" v-else-if="dataTypeIndex === 3">
        <div class="title" v-for="(item, index) in expendDataYear" :key="index">
          <span>{{item[0].nowTime[0].slice(0,4)}}</span>
          <div class="item" v-for="(item1, index) in item" :key="index">
            <span>{{item1.chooseTag}}({{item1.remarkValue}})</span>
            <span>￥{{item1.moneyInputValue}}</span>
          </div>
        </div>
      </div>
      
    </div>

    <div class="income_condition" v-else>
      <!-- 天收入 -->
      <div class="dayIncome" v-if="dataTypeIndex === 1">
        <div class="title" v-for="(item, index) in incomeDataDay" :key="index">
          <span>{{item[0].nowTime[0]}}</span>
          <div class="item" v-for="(item1, index) in item" :key="index">
            <span>{{item1.chooseTag}}({{item1.remarkValue}})</span>
            <span>￥{{item1.moneyInputValue}}</span>
          </div>
        </div>
      </div>
      <!-- 月收入 -->
      <div class="monthIncome" v-else-if="dataTypeIndex === 2">
        <div class="title" v-for="(item, index) in incomeDataMonth" :key="index">
          <span>{{item[0].nowTime[0].slice(0,-3)}}</span>
          <div class="item" v-for="(item1, index) in item" :key="index">
            <span>{{item1.chooseTag}}({{item1.remarkValue}})</span>
            <span>￥{{item1.moneyInputValue}}</span>
          </div>
        </div>
      </div>
      <!-- 年收入 -->
      <div class="yearIncome" v-else-if="dataTypeIndex === 3">
        <div class="title" v-for="(item, index) in incomeDataYear" :key="index">
          <span>{{item[0].nowTime[0].slice(0,4)}}</span>
          <div class="item" v-for="(item1, index) in item" :key="index">
            <span>{{item1.chooseTag}}({{item1.remarkValue}})</span>
            <span>￥{{item1.moneyInputValue}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部导航栏 -->
  <tab-bar></tab-bar>
  </div>

</template>

<script>
import TabBar from '../components/tabBar/tabBar.vue'

export default {
  name: 'Home',
  data() {
    return{
      typeIndex: 1,
      dataTypeIndex: 1,

      // 存储的数据
      stroageData: [
       
      ],

      // 支出数据
      expendData: [],
      // 收入数据
      incomeData: [],

      // 按天支出数据
      expendDataDay: {
      },
      // 按月支出数据
      expendDataMonth: {},
      // 按年支出数据
      expendDataYear: {},

      // 按天收入数据
      incomeDataDay: {
      },
      // 按月支出数据
      incomeDataMonth: {},
      // 按年支出数据
      incomeDataYear: {},
    }
  },
  components: {
    TabBar
  },
  created() {
    this.stroageData = JSON.parse(localStorage.getItem("keepAccountData")) || []
    this.expendData = this.stroageData[0] || []
    this.incomeData = this.stroageData[1] || []
    this.getExpendDayValue()
    this.getExpendMonthValue()
    this.getExpendYearValue()
    this.getIncomeDayValue()
    this.getIncomeMonthValue()
    this.getIncomeYearValue()
  },
  methods: {
    changeNav(index) {
      this.typeIndex = index
    },

    changeDataNav(index) {
      this.dataTypeIndex = index
    },

    // 按天支出的数据
    getExpendDayValue() {
      this.expendData.forEach(v => {
        if(!(v.nowTime[0] in this.expendDataDay)) {
          this.expendDataDay[v.nowTime[0]] = []
          this.expendDataDay[v.nowTime[0]].push(v)
        } else {
          this.expendDataDay[v.nowTime[0]].push(v)
        }
      });
    },

    // 按月支出的数据
    getExpendMonthValue() {
      this.expendData.forEach(v => {
        const MonthData = v.nowTime[0].slice(0,-3)
        if(!(MonthData in this.expendDataMonth)) {
          this.expendDataMonth[MonthData] = []
          this.expendDataMonth[MonthData].push(v)
        } else {
          this.expendDataMonth[MonthData].push(v)
        }
      });
    },

    // 按年支出的数据
    getExpendYearValue() {
      this.expendData.forEach(v => {
        const YearData = v.nowTime[0].slice(0,4)
        if(!(YearData in this.expendDataYear)) {
          this.expendDataYear[YearData] = []
          this.expendDataYear[YearData].push(v)
        } else {
          this.expendDataYear[YearData].push(v)
        }
      });
    },

    // 按天收入的数据
    getIncomeDayValue() {
      this.incomeData.forEach(v => {
        if(!(v.nowTime[0] in this.incomeDataDay)) {
          this.incomeDataDay[v.nowTime[0]] = []
          this.incomeDataDay[v.nowTime[0]].push(v)
        } else {
          this.incomeDataDay[v.nowTime[0]].push(v)
        }
      });
    },

    // 按月输入的数据
    getIncomeMonthValue() {
      this.incomeData.forEach(v => {
        const MonthData = v.nowTime[0].slice(0,-3)
        if(!(MonthData in this.incomeDataMonth)) {
          this.incomeDataMonth[MonthData] = []
          this.incomeDataMonth[MonthData].push(v)
        } else {
          this.incomeDataMonth[MonthData].push(v)
        }
      });
    },

    // 按年收入的数据
    getIncomeYearValue() {
      this.incomeData.forEach(v => {
        const YearData = v.nowTime[0].slice(0,4)
        if(!(YearData in this.incomeDataYear)) {
          this.incomeDataYear[YearData] = []
          this.incomeDataYear[YearData].push(v)
        } else {
          this.incomeDataYear[YearData].push(v)
        }
      });
    },
  }
}
</script >

<style scoped>
  .type{
    display: flex;
    height: 3rem;
    width: 100%;  
  }

  .type_style{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ccc;
    height: 3rem;
    font-weight: 600;
  }

  .type .expend{
    flex: 1;
  }

  .type .income{
    flex: 1;
  }

  .type_isActive{
    background-color: #fff!important;
  }


  .data_type{
    display: flex;
  }

  .data_type_info{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #bbb;
    background-color: #ccc;
    padding: 5px 0;
    font-weight: 600;
  }
  .title {
    background-color: #eee;
  }

  .item {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
  }

  span {
    padding: 1px 10px;
  }
</style>